<template>
	<div class="params">
		<el-form :inline="true">
			<el-form-item label="参数名称">
				<el-input size="small" v-model="formData.paramName" placeholder="请输入参数名称" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-button @click="reset" size="small">重置</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="search" size="small">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="showCreateParamDialog()" size="small">新增</el-button>
			</el-form-item>
			<el-form-item>
				<el-button :disabled="multipleSelection.length == 0" type="primary" size="small" @click="deleteParam">批量删除</el-button>
			</el-form-item>
		</el-form>
		
		<!-- 表格数据 -->
		<el-row>
			<el-table :data="tableData" v-loading="tableLoading"
				:header-cell-style="{ background: '#FAFAFA', textAlign: 'center' }"
				highlight-current-row :cell-style="{ textAlign: 'center' }" max-height="450" size="small"
				@select-all="selectAll" @select="rowSelect">
				<el-table-column type="selection" width="55"> </el-table-column>
				<el-table-column prop="resCategory" label="资源类别"></el-table-column>
				<el-table-column prop="paramName" label="资源名称"> </el-table-column>
				<el-table-column prop="unit" label="单位"> </el-table-column>
				<el-table-column prop="enumValue" label="枚举值"> </el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="text" @click="showEditParamDialog(scope.row)">编辑</el-button>
						<el-button type="text" @click="deleteParam(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-row>
		<br>
		
		<!-- 分页 -->
		<!-- <el-row>
			<el-pagination background align="center" @size-change="pageSizeChange"
				@current-change="currentPageChange" :current-page="formData.pageNum"
				:page-sizes="[5, 10, 15, 20]" :page-size="formData.pagesize"
				layout="total, sizes, prev, pager, next, jumper" :total="formData.total">
			</el-pagination>
		</el-row> -->
		
		<!-- 参数新增 dialog -->
		<el-dialog title="新增参数" :visible.sync="createParamDialogVisible" width="35%">
			<div>
				<el-form label-width="100px">
					<el-form-item label="资源类别">
						<el-input :value="catalog.catalogName" disabled />
					</el-form-item>
					<el-form-item label="参数名称" required>
						<el-input v-model="createForm.paramName"></el-input>
					</el-form-item>
					<el-form-item label="单位" required>
						<el-input v-model="createForm.unit"></el-input>
					</el-form-item>
					<el-form-item label="枚举值" required>
						<el-input v-model="createForm.enumValue"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer">
				<el-button @click="createParamDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveCreateParam">确 定</el-button>
			</span>
		</el-dialog>
		
		<!-- 参数编辑 dialog -->
		<el-dialog title="编辑参数" :visible.sync="editParamDialogVisible" width="35%">
			<div>
				<el-form label-width="100px">
					<el-form-item label="资源类别">
						<el-input :value="catalog.catalogName" disabled />
					</el-form-item>
					<el-form-item label="参数名称">
						<el-input v-model="editForm.paramName"></el-input>
					</el-form-item>
					<el-form-item label="单位">
						<el-input v-model="editForm.unit"></el-input>
					</el-form-item>
					<el-form-item label="枚举值">
						<el-input v-model="editForm.enumValue"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer">
				<el-button @click="editParamDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveEditParam">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		props: {
			catalog: {
				type: Object,
				default: null
			}
		},
		data() {
			return {
				formData: {
					paramName: '',
					pageNum: 1,
					pageSize: 20,
					total: 0
				},
				createParamDialogVisible: false,
				createForm: {
					
				},
				editParamDialogVisible: false,
				editForm: {
					
				},
				tableData: [],
				multipleSelection:[],
				tableLoading: false
			}
		},
		watch: {
			catalog(newval) {
				this.loadTableData()
			}
		},
		methods: {
			reset() {
				this.formData.paramName = ''
			},
			search() {
				this.loadTableData()
			},
			loadTableData() {
				this.$http({
					url: '/api/resources/param/list',
					method: 'POST',
					data: {
						cataId: this.catalog.catalogId,
						...this.formData
					}
				}).then(res=>{
					this.tableData = res.data.rows
				})
			},
			pageSizeChange(pageSize) {
				this.formData.pageSize = pageSize;
			},
			currentPageChange(pageNum) {
				this.formData.pageNum = pageNum;
			},
			selectAll(list) {
				this.multipleSelection = list;
			},
			rowSelect(list) {
				this.multipleSelection = list;
			},
			showCreateParamDialog() {
				this.createParamDialogVisible = true;
				this.createForm = {}
			},
			saveCreateParam() {
				this.$http({
					url: '/api/resources/param/add',
					method: 'POST',
					data: {
						cataId: this.catalog.catalogId,
						...this.createForm
					}
				}).then(res=> {
					this.$message.success("添加成功");
					this.createParamDialogVisible = false;
					this.loadTableData()
				})
			},
			showEditParamDialog(row) {
				this.editForm = row;
				this.editParamDialogVisible = true;
			},
			saveEditParam() {
				this.$http({
					url: '/api/resources/param/edit',
					method: 'POST',
					data: {
						...this.editForm
					}
				}).then(res=> {
					this.$message.success("修改成功");
					this.editParamDialogVisible = false;
					this.loadTableData()
				})
			},
			deleteParam(row) {
				this.$confirm('此操作将删除该记录, 是否继续?', '提示', { type: 'error' })
				.then(() => {
					let paramIds = row?.paramId ? row.paramId : this.multipleSelection.map(p=>p.paramId).join(',');
					this.$http({
						url: `/api/resources/param/delete/${paramIds}`,
						method: 'POST'
					}).then(res=> {
						this.$message.success("删除成功");
						this.loadTableData()
					})
				})
			}
		}
	}
</script>

<style>
</style>